rehype-parse

What is rehype-parse?

rehype-parse is a plugin for the unified processor that parses HTML into a syntax tree. It is part of the rehype ecosystem, which is a toolset for transforming HTML with plugins. This package is particularly useful for processing and manipulating HTML content programmatically.

What are rehype-parse's main functionalities?

Basic HTML Parsing

This feature allows you to parse a simple HTML string into a syntax tree. The code sample demonstrates how to parse an HTML string and inspect the resulting tree structure.

const unified = require('unified');
const parse = require('rehype-parse');
const inspect = require('unist-util-inspect');

const html = '<h1>Hello, world!</h1>';
const tree = unified()
  .use(parse)
  .parse(html);

console.log(inspect(tree));

Parsing with Options

This feature allows you to parse HTML with specific options. In this example, the 'fragment' option is set to true, which allows parsing of HTML fragments instead of full documents.

const unified = require('unified');
const parse = require('rehype-parse');
const inspect = require('unist-util-inspect');

const html = '<h1>Hello, world!</h1>';
const tree = unified()
  .use(parse, { fragment: true })
  .parse(html);

console.log(inspect(tree));

Integration with Other Plugins

This feature demonstrates how to integrate rehype-parse with other plugins in the rehype ecosystem. The code sample shows how to parse HTML and then stringify it back to HTML.

const unified = require('unified');
const parse = require('rehype-parse');
const stringify = require('rehype-stringify');

const html = '<h1>Hello, world!</h1>';
const output = unified()
  .use(parse)
  .use(stringify)
  .processSync(html)
  .toString();

console.log(output);

Other packages similar to rehype-parse

htmlparser2

htmlparser2 is a fast and forgiving HTML/XML parser. It is more low-level compared to rehype-parse and provides a SAX-style parser, which can be more complex to use but offers more control over the parsing process.

parse5

parse5 is a highly compliant HTML parser that closely follows the WHATWG HTML specification. It is similar to rehype-parse in terms of compliance and ease of use but is a standalone parser without the plugin ecosystem that rehype offers.

jsdom

jsdom is a JavaScript implementation of the DOM and HTML standards. It is more heavyweight compared to rehype-parse and is used for simulating a browser environment, making it suitable for more complex DOM manipulations and testing.

README

rehype-parse

Parser for unified. Parses HTML to a HAST syntax tree. Used in the rehype processor.

Installation

npm:

npm install rehype-parse

Usage

var unified = require('unified');
var createStream = require('unified-stream');
var parse = require('rehype-parse');
var stringify = require('rehype-stringify');

process.stdin
  .pipe(createStream(unified().use(parse).use(stringify)))
  .pipe(process.stdout);

API

processor.use(parse[, options])

Configure the processor to read HTML as input and process an HAST syntax tree.

options

options.fragment

Specify whether to parse a fragment (boolean, default: false), instead of a complete document. In document mode, unopened html, head, and body elements are opened in just the right places.

options.verbose

Patch extra positional information (boolean, default: false). If specified, the following element:

<img src="#" alt>

...has the following data:

{ position:
   { opening:
      { start: { line: 1, column: 1, offset: 0 },
        end: { line: 1, column: 18, offset: 17 } },
     closing: null,
     properties:
      { src:
         { start: { line: 1, column: 6, offset: 5 },
           end: { line: 1, column: 13, offset: 12 } },
        alt:
         { start: { line: 1, column: 14, offset: 13 },
           end: { line: 1, column: 17, offset: 16 } } } } }

parse.Parser

Access to the parser, if you need it.

License

MIT © Titus Wormer